//这是“特产商城”less文件

//1.引入css文件
@import "reset.css";
@import "scroll.css";
@font-size:100rem;

//2.基础代码块
html{
  font-size: 13.33vw;
}
*{
  box-sizing: border-box;
}
.clearfix:after,.clearfix:before{
  content: '';
  display: block;
  clear: both;
}
.fr{
  float: right;
}
.fl{
  float: left;
}
html,body{
  width: 100%;
  height: 100%;
}
//3.自己的代码块
//设置整体样式
body{
  color: #5a5a5a;
  font-size: 26./@font-size;
  font-family: '微软雅黑';
}
//设置内容样式
.container{

  display: flex;
  flex-direction: column;
  width: 750./@font-size;
  height: 100%;
  margin: 0 auto;
  background-color: #f6f6f6;
  //设置顶部样式
  .header{
    width: 100%;
    height: 100./@font-size;
    background-color: #eee;
    padding: 24./@font-size 20./@font-size;
    a {
      display: flex;
      justify-content: space-between;
      p{
        .one{
          width: 32./@font-size;
          height: 32./@font-size;
        }
        color: #000;
        font-size: 36./@font-size;
        font-weight: 400;
      }
      .two{
        margin-top:23./@font-size ;
        width: 42./@font-size;
        height: 10./@font-size;
      }
    }
  }
  //设置中部样式
  .section{
    width: 100%;
    background-color: #f6f6f6;
    //头部和顶部的区域去除后所有的区域都是section的
    flex: 1;
    //将所有的滚动条隐藏
    //只显示y轴上的滚动条
    overflow: hidden;
    overflow-y: auto;
    //1.搜索栏
    .search-bar{
      margin-top:18./@font-size ;
      padding-left: 18./@font-size;
      margin-bottom: 16./@font-size;
      //设置搜索栏具体内容
      .search{
        display: flex;
        justify-content: space-between;
        width: 700./@font-size;
        height: 65./@font-size;
        background-color:#fff ;
        border-radius: 30./@font-size;
        .left{
          color: #434343;
          font-size: 24./@font-size;
          display: flex;
          padding-left: 28./@font-size;
          padding-top: 20./@font-size;
          .line{
            margin:0 25./@font-size ;
            border-left: 1./@font-size solid #cccccc;
            height: 30./@font-size;

          }
          .tri{
            margin-left: 12./@font-size;
            margin-top: 10./@font-size;
            width: 12./@font-size;
            height: 12./@font-size;
            border: 1./@font-size solid #434343;
            border-left: none;
            border-bottom: none;
            transform: rotate(135deg);

          }
          input{
            outline: none;
            border: none;
            color: #A8A8A8;
            font-size: 20./@font-size;
          }
        }

          img{
            margin-top:20./@font-size ;
            margin-right: 18./@font-size;
            width: 26./@font-size;
            height: 26./@font-size;
          }
      }
    }
    //2.图片
    .banner{
      padding-left:18./@font-size;
      //设置上下边距
      margin-top: 18./@font-size;
      img{
        width: 711./@font-size;
        height: 344./@font-size;
      }
    }
  //3.“公益广告”
    .ad-bar{
      margin-bottom: 19./@font-size;
      padding: 0 20./@font-size;
      .ad{
        width: 700./@font-size;
        height: 65./@font-size;
        line-height: 65./@font-size;
        text-align: center;
        background-color: #f1e4d3;
        border-radius: 5./@font-size;
        display: flex;
        justify-content: space-around;
        .left{
          color: #AC7D39;
          font-size: 26./@font-size;
          img{
            width: 26./@font-size;
            height: 30./@font-size;
          }
        }
        .right{
          font-size: 20./@font-size;
          color: #AC7D39;
          span{
            color: #F84443;
          }
        }

      }
    }
  //  4.导航
    .nav-bar{
      width: 100%;
      padding: 0 19./@font-size;
      .nav{
        width: 700./@font-size;
        height: 416./@font-size;
        .list{
          background-color: #fff;
          border-radius: 5./@font-size;
          display: flex;
          justify-content: space-between;

          padding:36./@font-size 36./@font-size 0 40./@font-size;
          &.active{
            padding-bottom: 48./@font-size;
          }
          .item{
            a{
              img{
                width: 106./@font-size;
                height: 106./@font-size;
              }
              p{

                color: #282828;
                font-size: 26./@font-size;
              }
            }
          }
        }
    }

    }
  //  5.“热门推荐”
    .recom{
      display: flex;
      padding-left: 19./@font-size;
      margin: 26./@font-size 0;
      .left{
        width: 318./@font-size;
        height: 343./@font-size;
        background-color: #fff;
        border-radius: 5./@font-size;
        padding-left: 19./@font-size;
        padding-top:30./@font-size ;
        .title{
          display: flex;

          h2{
            color: #4C4747;
            font-size: 30./@font-size;
          }
          .bt{
            width: 80./@font-size;
            height: 25./@font-size;
            line-height: 25./@font-size;
            text-align: center;
            background-color: #F84443;
            border-radius:5./@font-size;
            color: #fff;
            font-size: 15./@font-size;
            margin-top: 10./@font-size;
            margin-left: 5./@font-size;
          }
        }
        p{
          color: #ACACAC;
          font-size: 26./@font-size;
        }
        img{
          width: 246./@font-size;
          height: 223./@font-size;
        }
      }
      .right{
        margin-left: 5./@font-size;
        .org{
          display: flex;
          justify-content: space-between;
          width: 378./@font-size;
          height: 165./@font-size;
          background-color: #fff;
          border-radius: 5./@font-size;
          &.active{
            margin-top: 13./@font-size;
          }
          .instro{
            padding-left:26./@font-size ;
            display: flex;
            flex-direction: column;
            justify-content: center;
            h2{
              font-size: 30./@font-size;
              color: #4C4747;
            }
            p{
              color: #ACACAC;
              font-size: 24./@font-size;
            }
            div{
              width: 80./@font-size;
              height: 25./@font-size;
              line-height: 25./@font-size;
              text-align: center;
              border: 1./@font-size solid #F84443;
              border-radius:5./@font-size;
              color: #F84443;
              font-size: 15./@font-size;
            }

          }


          img{
            margin-top: 16./@font-size;
            margin-right: 16./@font-size;
            width: 168./@font-size;
            height: 144./@font-size;
          }
        }


      }
    }
    //  6.限时抢购
    //  7.“热门路线”
    .sale{
      padding: 0 20./@font-size 27./@font-size 19./@font-size;
      .sale-content{
      width: 700./@font-size;
      height: 450./@font-size;
      background-color: #fff;
      border-radius: 5./@font-size;
      //设置顶部
      .title{
        display: flex;
        justify-content: space-between;
        padding: 24./@font-size 24./@font-size 0 27./@font-size;
        .left{
          display: flex;

          .item{
            //设置字体渐变
            height: 35./@font-size;
            width: 144./@font-size;
            -webkit-background-clip:text;
            color:transparent;
            background-image: linear-gradient(to top,#F84443,#FF946A);
            .time{
              display: flex;
              color: #000;
              .top,.center,.bot{
                width: 35./@font-size;
                height: 35./@font-size;
                background-color: #FF946A;
                color: #fff;
                line-height: 35./@font-size;
                text-align: center;
                margin: 0 10./@font-size;
              }
            }
            &.line{
              color: #282828;
              font-size: 30./@font-size;
            }
          }
          .right{
            color: #959494;
            font-size: 24./@font-size;
            img{
              margin-right: 10./@font-size;
              width: 20./@font-size;
              height: 20./@font-size;
            }
          }


        }


      }
      //设置内容
      .list{
        padding-left:18./@font-size ;
        padding-top: 26./@font-size;
        display: flex;
        justify-content: space-between;

        .item{
          &.other{
            img{
              width: 41./@font-size;
              height: 273./@font-size;
            }
          }
          &.oth{
            img{
              width: 41./@font-size;
              height: 320./@font-size;
            }
          }

          a{

            img{
              width: 196./@font-size;
              height: 196./@font-size;
            }
            .word{
              margin-top:13./@font-size ;
              font-size: 26./@font-size;
              color: #282828;
            }
            .price{
              margin-top:5./@font-size ;
              color: #F84443;
              font-size: 20./@font-size;
              font-weight: 400;
              s,span{
                color: #adadad;
                font-size: 10./@font-size;
              }
            }
          }
        }
      }

    }
  }

  //  8.精品推荐导航
    .boutique{
      //顶部文字说明
      .title{
        display: flex;
        justify-content: space-between;
        color: #000;
        font-size: 36./@font-size;
        padding: 52./@font-size 57./@font-size 0./@font-size 80./@font-size;
          .one{
            color: #F84443;
            .line{
              margin-left: 30./@font-size;
              width: 80./@font-size;
              height: 5./@font-size;
              background-color: #F84443;
            }

        }

      }
      //具体内容
      .content{

        .list{
          padding-left: 20./@font-size;
          padding-top: 33./@font-size;
          padding-right: 17./@font-size;
          display: flex;
          justify-content: space-between;
          .item{
            padding-left: 26./@font-size;
            width: 344./@font-size;
            height:426./@font-size ;
            background-color: #fff;
            border-radius: 5./@font-size;
            .pic{
              margin: 42./@font-size 64./@font-size 0 49./@font-size;
              width: 205./@font-size;
              height: 205./@font-size;
            }
            .instro{
              margin-top: 47./@font-size;
              color: #282828;
              font-size: 28./@font-size;
            }
            .word{
              color: #A19FA0;
              font-size: 24./@font-size;

            }
            .price{
              display: flex;
              justify-content: space-between;
                color: #F84443;
                font-size: 24./@font-size;
              .add{
                margin-right: 13./@font-size;
                width: 40./@font-size;
                height: 40./@font-size;
              }
            }
          }
        }
      }
    }

  }
  //设置底部样式
  .footer{
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 11./@font-size 62./@font-size 14./@font-size 56./@font-size;
    a{
      display: flex;
      flex-direction: column;
      align-items: center;
      &.active{
        p{
          color: #f84443;
        }
      }
      img{
        width: 37./@font-size;
        height: 42./@font-size;
      }
      p{
        color: #a4a4a4;
      }

    }
  }
}